<template>
    <div class="item flex-center">
        <el-card class="box-card flex-center">
            <div>
                <el-card class="flex-center">
                    <div class="flex-center">
                        <div>
                            <el-input style="width: 100px;" placeholder="请输入单位如：px" v-model="frontUnit">
                                <template slot="prepend">1</template>
                            </el-input>
                        </div>
                        <h2 style="margin: 10px;">TO</h2>
                        <div>
                            <el-input style="width: 100px;" placeholder="比例" v-model="value">
                            </el-input>
                        </div>
                        <div>
                            <el-input style="width: 100px;" placeholder="请输入内容" v-model="behindUnit">
                            </el-input>
                        </div>
                        <div style="margin-left: 10px;">
                            <el-radio v-model="radio" label="A">乘积</el-radio>
                            <el-radio v-model="radio" label="B">除余</el-radio>
                        </div>
                    </div>
                </el-card>
            </div>
            <div>
                <div class="entrance flex-center">
                    <el-input type="textarea" :rows="10" placeholder="请输入要处理的CSS,也可直接输入数字！"
                        v-model="entrance">
                    </el-input>
                </div>
                <div class="exit">
                    <el-input type="textarea" :rows="10" placeholder="处理完成的CSS" v-model="exit">
                    </el-input>
                </div>
                <div class=" success flex-center">
                    <el-button type="success" @click="success" round>确认转换</el-button>
                    <el-button type="success" @click="setText" round>复制结果</el-button>
                </div>
            </div>
        </el-card>
    </div>

</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from "vue"
import { ElMessage } from "element-plus"
const entrance = ref('')
const exit = ref('')
const frontUnit = ref('px')
const behindUnit = ref('rpx')
const value = ref(2)
const radio = ref('A')
onMounted(async () => {
    getText()
})
const success = (e) => {
    manage()
}
// 获取文本
const getText = () => {
    let css = null;
    navigator.clipboard.readText()
        .then((text) => {
            if (text) {
                ElMessage.success('已GET到您复制的内容！')
                entrance.value = text;
                console.log(entrance.value)
            }
            success()
        })
        .catch(err => {
            console.error("出错")
        })
}
const setText = () => {
    if (exit.value != '') {
        navigator.clipboard.writeText(exit.value)
        console.log(exit.value)
        navigator.clipboard.writeText(exit.value)
            .then(() => {
                entrance.value = '';
                ElMessage.success('转换成功，已设置到粘贴板！')
            })
            .catch(err => {
                entrance.value = '';
                ElMessage.warning('写入粘贴板失败，请手动复制！')
                console.log(err)
            })
    } else {
        ElMessage.warning('没有结果！')
    }
}
const manage = (e) => {
    let type = radio.value;
    if (entrance.value) {
        console.log(Number(entrance.value))
        if (isNaN(Number(entrance.value))) {
            let css = entrance.value;
            var reg = new RegExp('[0-9]{0,4}' + frontUnit.value, 'g');
            console.log(reg);
            var arr = css.match(reg);
            let str = css;
            console.log(arr, str)
            arr.map((item, index) => {
                if (css.indexOf(item) != -1) {
                    let item_num = item.replace(frontUnit.value, "");
                    item_num = parseInt(item_num)
                    console.log("item_num", item_num);
                    if (type == 'A') {
                        str = str.replace(item, (item_num * value.value) + behindUnit.value);
                    } else {
                        str = str.replace(item, (item_num / value.value) + behindUnit.value);
                    }
                }
            })
            console.log(str);
            exit.value = str;
        } else {
            if (type == 'B') {
                exit.value = Number(entrance.value) * value.value + behindUnit.value
            } else {
                exit.value = Number(entrance.value) / value.value + behindUnit.value
            }
        }
        setText()
    } else {
        ElMessage.error('请填写CSS样式');
    }
}
</script>

<style scoped>
.item {
    /* width: 100vw; */
    /* height: 100vh; */
}

.box-card {
    margin-top: 40px;

}

.entrance {
    margin-top: 40px;
}

.exit {
    margin-top: 40px;
}

.success {
    margin-top: 40px;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>